﻿@inherits DemoWithResizableComponent

<div class="demo-description" id="ShowSelectedItems">
    <h2><DemoNavLink Link="TagBox#ShowSelectedItems" />TagBox - Show Selected Items</h2>
    <p>
        In this demo, the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTagBox-2">TagBox</a> displays selected items in the drop-down list.
        Set the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTagBox-2.HideSelectedItems">HideSelectedItems</a> property to <b>false</b> to enable this behavior.
    </p>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode" Title="Select items"/>
    </div>
    <div class="card-body mw-480">
        <DxTagBox Data="@DataSource"
                  @bind-Values="@Values"
                  TextFieldName="@nameof(City.CityName)"
                  HideSelectedItems="false"
                  SizeMode="SizeMode" />
    </div>
</div>

<CodeSnippet_Editor_TagBox_ShowHideSelectedItems></CodeSnippet_Editor_TagBox_ShowHideSelectedItems>

@code {
    List<City> DataSource { get; set; }
    IEnumerable<City> Values { get; set; }

    protected override void OnInitialized() {
        base.OnInitialized();
        DataSource = CountryCity.Cities;
        Values = new List<City>() { DataSource[3], DataSource[5] };
    }
}
